<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>十万个为什么</title>
    <link rel="stylesheet" href="./bootstrap.css">
    <link rel="icon" href="./img/Logo.jpg" type="image/x-icon">
    <link rel="stylesheet" href="./swgwhy_AI.css">
    <link rel="stylesheet" href="./font_1hifg03ookt/iconfont.css">
    <style>
        .swgwhy{
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding-top: 0px;
            margin: 0px;
            background-color: rgb(180, 224, 236);
        }
        .swgwhy .swgwhy_head{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 1440px;
            height: 130px;
            padding-top: 56px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 64px;
        }
        .swgwhy .swgwhy_top{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 1440px;
            height: 100%;
            margin: auto;
        }
        .swgwhy .swgwhy_bottom{
            display: flex;
            justify-content: center;
            width: 100%;
            height: 250px;
            background-color: rgb(72, 0, 122);
            padding-top: 50px;
            padding-bottom: 20px;
        }
        #carouselExampleSlidesOnly {
            width: 1200px;
            height: 150px;
        }
        .carousel-item img {
            max-width: 100%;
            max-height: 553px;
            margin: auto;
        }
        * {
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
        }
            
                    body {
                        min-height: 100vh;
                        background-color: var(--body-color);
                        transition: all 0.3s ease;
                    }
            
                    /* 设置全局变量 */
                    :root {
                        --body-color: #E4E9F7;
                        --shell-color: #FFF;
                        --primary-color: #695CFE;
                        --primary-color-light: #F6F5FF;
                        --toggle-color: #DDD;
                        --text-color: #707070;
                    }
            
                    /* 深色主题变量 */
                    .dark {
                        --body-color: #202224;
                        --shell-color: #171717;
                        --primary-color: #3a3b3c;
                        --primary-color-light: #3a3b3c;
                        --toggle-color: #fff;
                        --text-color: #ccc;
                    }
            
                    .shell {
                        position: fixed;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 250px;
                        padding: 10px 14px;
                        background: var(--shell-color);
                        transition: all 0.3s ease;
                        z-index: 100;
                    }
            
                    .close {
                        width: 88px;
                    }
            
                    .shell li {
                        height: 50px;
                        list-style: none;
                        display: flex;
                        align-items: center;
                        margin-top: 10px;
                    }
            
                    .image,
                    .icon {
                        min-width: 60px;
                        border-radius: 6px;
                    }
            
                    .icon {
                        min-width: 60px;
                        border-radius: 6px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font: 300 23px '';
                    }
            
                    .text,
                    .icon {
                        color: var(--text-color);
                        transition: all 0.3s ease;
                    }
            
                    .text {
                        font: 500 17px;
                        white-space: nowrap;
                        opacity: 1;
                    }
            
                    .shell.close .text {
                        opacity: 0;
                    }
            
                    header {
                        position: relative;
                    }
            
                    .image-text {
                        display: flex;
                        align-items: center;
                    }
            
                    .logo-text {
                        display: flex;
                        flex-direction: column;
                    }
            
                    .name {
                        margin-top: 2px;
                        font: 600 18px '';
                    }
            
                    .software {
                        font-size: 20px;
                        margin-top: -2px;
                        display: block;
                    }
            
                    .image {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
            
                    .image img {
                        width: 45px;
                        border-radius: 6px;
                    }
            
                    .toggle {
                        position: absolute;
                        top: 50%;
                        right: -25px;
                        transform: translateY(-50%) rotate(180deg);
                        height: 25px;
                        width: 25px;
                        background-color: var(--primary-color);
                        color: var(--shell-color);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 15px;
                        cursor: pointer;
                        transition: all 0.3s ease;
                    }
            
                    .toggle {
                        color: #ccc;
                    }
            
                    .shell.close .toggle {
                        transform: translateY(-50%) rotate(0deg);
                    }
            
                    .menu {
                        margin-top: 40px;
                    }
            
                    li.search-box {
                        border-radius: 6px;
                        background-color: var(--primary-color-light);
                        cursor: pointer;
                        transition: all 0.3s ease;
                    }
            
                    li.search-box input {
                        height: 100%;
                        width: 100%;
                        outline: none;
                        border: none;
                        background-color: var(--primary-color-light);
                        color: var(--text-color);
                        border-radius: 6px;
                        font-size: 17px;
                        font-weight: 500;
                        transition: all 0.3s ease;
                    }
            
                    .shell li a {
                        list-style: none;
                        height: 100%;
                        background-color: transparent;
                        display: flex;
                        align-items: center;
                        height: 100%;
                        width: 100%;
                        border-radius: 6px;
                        text-decoration: none;
                        transition: all 0.3s ease;
                    }
            
                    .shell li a:hover {
                        background-color: var(--primary-color);
                    }
            
                    .shell li a:hover .icon,
                    .shell li a:hover .text {
                        color: var(--shell-color);
                    }
            
                    .menu-bar {
                        height: calc(100% - 55px);
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        overflow-y: scroll;
                    }
            
                    .menu-bar::-webkit-scrollbar {
                        display: none;
                    }
            
                    .menu-bar .mode {
                        border-radius: 6px;
                        background-color: var(--primary-color-light);
                        position: relative;
                        transition: all 0.3s ease;
                    }
            
                    .menu-bar .mode .sun-moon {
                        height: 50px;
                        width: 60px;
                    }
            
                    .mode .sun-moon i {
                        position: absolute;
                    }
            
                    .mode .sun-moon i.sun {
                        opacity: 0;
                    }
            
                    .toggle-switch {
                        position: absolute;
                        right: 0;
                        height: 100%;
                        min-width: 60px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 6px;
                        cursor: pointer;
                    }
            
                    .switch {
                        position: relative;
                        height: 22px;
                        width: 40px;
                        border-radius: 25px;
                        background-color: var(--toggle-color);
                        transition: all 0.3s ease;
                    }
            
                    .switch::before {
                        content: '';
                        position: absolute;
                        height: 15px;
                        width: 15px;
                        border-radius: 50%;
                        top: 50%;
                        left: 5px;
                        transform: translateY(-50%);
                        background-color: var(--shell-color);
                        transition: all 0.3s ease;
                    }
            
                    .dark .shell li a:hover .icon,
                    .dark .shell li a:hover .text {
                        color: #ccc;
                    }
            
                    .dark .mode .sun-moon i.sun {
                        opacity: 1;
                    }
            
                    .dark .mode .sun-moon i.moon {
                        opacity: 0;
                    }
            
                    .dark .switch::before {
                        left: 20px;
                    }
    </style>
</head>
<script>
    //鼠标点击事件
    window.onclick = function() {
    const heart = document.createElement("div")
    document.body.appendChild(heart)
    heart.classList.add("heart")
    heart.style.left = event.clientX + "px"
    heart.style.top = event.clientY + "px"
    heart.style.animation = "move 1s normal forwards"
    setTimeout(function () {
        document.body.removeChild(heart)
    },1000)
    heart.style.backgroundColor = "rgb(" + (Math.random() * 255) + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")"
    };
    //实时获取时间
    function updateClock() {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1; // 月份是从0开始的
    var day = now.getDate();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    month = (month < 10 ? "0" : "") + month;
    day = (day < 10 ? "0" : "") + day;
    hours = (hours < 10 ? "0" : "") + hours;
    minutes = (minutes < 10 ? "0" : "") + minutes;
    seconds = (seconds < 10 ? "0" : "") + seconds;
    document.getElementById('date-time').textContent = year + "/" + month + "/" + day + " " + hours + ":" + minutes + ":" + seconds;
    }
    setTimeout(updateClock, 1000);
    //实时获取时间
    function updateClock1() {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1; // 月份是从0开始的
    var day = now.getDate();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    month = (month < 10 ? "0" : "") + month;
    day = (day < 10 ? "0" : "") + day;
    hours = (hours < 10 ? "0" : "") + hours;
    minutes = (minutes < 10 ? "0" : "") + minutes;
    seconds = (seconds < 10 ? "0" : "") + seconds;
    document.getElementById('date-time1').textContent = year + "/" + month + "/" + day + " " + hours + ":" + minutes + ":" + seconds;
    }
    setTimeout(updateClock1, 1000);
</script>
<body class="swgwhy">
    <div class="swgwhy_ai">
    </head>
    <body>
        <nav class="shell close">
            <header>
                <div class="image-text">
                    <span class="image">
                        <img src="img/Logo.jpg" alt="">
                    </span>
                    <div class="text logo-text">
                        <span class="name">用户名</span>
                        <span class="software">-十万个为什么-</span>
                    </div>
                </div>
                <i class="iconfont icon-xiangyoujiantou toggle"></i>
            </header>
            <div class="menu-bar">
                <div class="menu">
                    <li class="search-box">
                        <i class="iconfont icon-sousuo icon"></i>
                        <input type="text" placeholder="搜索...">
                    </li>
                    <ul class="menu-links">
                        <li class="nav-link">
                            <a href="./swgwhy_AI.html">
                                <i class="iconfont icon-zhuye icon"></i>
                                <span class="text nac-text">主页</span>
                            </a>
                        </li>
    
                        <li class="nav-link">
                            <a href="#">
                                <i class="iconfont icon-wodeshoucang icon"></i>
                                <span class="text nac-text">我的收藏</span>
                            </a>
                        </li>
    
                        <li class="nav-link">
                            <a href="#">
                                <i class="iconfont icon-lishijilu icon"></i>
                                <span class="text nac-text">历史记录</span>
                            </a>
                        </li>
    
                        <li class="nav-link">
                            <a href="#">
                                <i class="iconfont icon-xiaoxi icon"></i>
                                <span class="text nac-text">消息</span>
                            </a>
                        </li>
    
                        <li class="nav-link">
                            <a href="#">
                                <i class="iconfont icon-wuguan icon"></i>
                                <span class="text nac-text">AI</span>
                            </a>
                        </li>
    
                        <li class="nav-link">
                            <a href="#">
                                <i class="iconfont icon-chuangzuozhongxin icon"></i>
                                <span class="text nac-text">创作中心</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="bottom-content">
                    <li class="">
                        <a href="#">
                            <i class="iconfont icon-logout icon"></i>
                            <span class="text nac-text">注销</span>
                        </a>
                    </li>
                    <li class="mode">
                        <div class="sun-moon">
                            <i class="iconfont icon-yejianmoshi icon sun"></i>
                            <i class="iconfont icon-yejian icon moon"></i>
                        </div>
                        <span class="mode-text text">夜间模式</span>
                        <div class="toggle-switch">
                            <span class="switch"></span>
                        </div>
                    </li>
                </div>
            </div>
    
        </nav>
    
    </body>
    
    
    <script>
    
        const body = document.querySelector('body'),
            shell = body.querySelector('nav'),
            toggle = body.querySelector(".toggle"),
            searchBtn = body.querySelector(".search-box"),
            modeSwitch = body.querySelector(".toggle-switch"),
            modeText = body.querySelector(".mode-text");
        // 点击toggle元素时触发事件
        toggle.addEventListener("click", () => {
            // 切换shell元素的close类
            shell.classList.toggle("close");
        })
        // 点击searchBtn元素时触发事件
        searchBtn.addEventListener("click", () => {
            // 移除shell元素的close类
            shell.classList.remove("close");
        })
        // 点击modeSwitch元素时触发事件
        modeSwitch.addEventListener("click", () => {
            // 切换body元素的dark类
            body.classList.toggle("dark");
            // 如果body元素包含dark类
            if (body.classList.contains("dark")) {
                modeText.innerText = "白日模式";
            } else {
                modeText.innerText = "夜间模式";
            }
        });
    
    
    </script>
    
    </html>
    
  </div>    
  </div>    
    <div class="swgwhy_head">
        <header class="why_head">
            <nav class="why_header">
                <div class="menu-items">
                    <a href="#" style="display: flex; text-decoration: none;flex-direction: column; align-items: center;">
                        <img src="./img/Logo.jpg" style="width: 120px;height: 120px;border-radius: 50%;"></a>
                    <ul class="menu-ul">
                        <li class="menu-li-0"><h1></h1></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>发现</b></h1></a></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>生物</b></h1></a></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>科学</b></h1></a></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>历史</b></h1></a></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>地理</b></h1></a></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>其他</b></h1></a></li>
                    </ul>
                </div>
            </nav>
        </header>
    </div>
    <main class="swgwhy_top">
        <div class="ai-main">
            <div class="ai-00">
                <div class="people_work">
                    <div class="people-logo"><img src="./img/people.png" style="width: 50px;border-radius: 20%;"></div>
                    <div class="data-write">
                        <p id="date-time" style="width: 160px;height: 24px;margin: 0px;margin-left: 5px;"></p>
                        <div class="people-write">
                            <img src="./img/people_write.png">
                        </div>
                    </div>
                </div>
                <div class="ai_work">
                    <div class="ai-logo"><img src="./img/Logo.jpg" style="width: 50px;border-radius: 20%;"></div>
                    <div class="data-write">
                        <p id="date-time1" style="width: 160px;height: 24px;margin: 0px;margin-left: 5px;"></p>
                        <div class="ai-write">
                            <div class="write"><img src="./img/ai-write.png" style="width: 960px;height: 250px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="user">
                <textarea class="input-box" type="" placeholder="可通过shift+回车换行" style="background-color: azure;"></textarea>
                <button class="btn" style="padding: 0px;"><img src="./img/anniu.png" style="width:36px;height: 36px;"></button>
            </div>
        </div>
    </main>
    <div class="swgwhy_bottom">
        <div class="swgwhy_foot">
            <div class="foot_top">
                <img src="./img/Logo.jpg" style="width: 75px;height: 75px;margin-right: 40px;border-radius: 50%;"><img src="./img/jk-logo.png" style="width: 75px;height: 75px;">
            </div>
            <div class="footer">
                <h2 style="color: white;margin: 0px;font-size: 15px;">版权所有@江西科技学院瀚岳软件工作室</h2>
                <p></p>
                <nav style="margin-top: 30px;">
                    <a href="#" style="text-decoration: none;color: white;font-size: 12px;">条款和条件</a> 
                    <span style="font-size: 15px;color: white;">·</span> 
                    <a href="#" style="text-decoration: none;color: white;font-size: 12px;">隐私政策</a>
                    <span style="font-size: 15px;color: white;">·</span> 
                    <a href="#" style="text-decoration: none;color: white;font-size: 12px;">关于十万个为什么的重要通知</a>
                    <span style="font-size: 15px;color: white;">·</span> 
                    <a href="#" style="text-decoration: none;color: white;font-size: 12px;">十万个为什么偏好</a>
                    <span style="font-size: 15px;color: white;">·</span> 
                    <a href="#" style="text-decoration: none;color: white;font-size: 12px;">行为准则</a>
                    <span style="font-size: 15px;color: white;">·</span> 
                    <a href="#" style="text-decoration: none;color: white;font-size: 12px;">联系我们</a>
                    <span style="font-size: 15px;color: white;">·</span> 
                    <a href="#" style="text-decoration: none;color: white;font-size: 12px;">关于江西科技学院</a>
                </nav>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="./bootstrap.bundle.min.js"></script>
    <script src="./bootstrap.js"></script>
</body>
</html>